<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-row :gutter="20" class="mb10" style="margin-bottom: 10px;">
      <el-col :span="4">
        <el-input 
          v-model="searchParams.regName" 
          placeholder="请输入姓名" 
          clearable 
          @clear="fetchData()"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchParams.regPhone"
          placeholder="请输入手机号"
          clearable
          @clear="fetchData()"
        />
      </el-col>
      <el-col :span="16" class="text-right">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="tableData" border>
      <el-table-column type="index" />
      <el-table-column prop="regName" label="姓名"/>
      <el-table-column prop="regPhone" label="手机号"/>
      <el-table-column prop="regEmail" label="邮箱"/>
      <el-table-column prop="regCompany" label="公司名称"/>
      <el-table-column prop="regPosition" label="职位"/>
      
      <!-- 新增注册时间列 -->
      <el-table-column label="注册时间" width="180">
        <template slot-scope="scope">
          {{ formatTime(scope.row.regTime) }}
        </template>
      </el-table-column>

      <el-table-column label="会员类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.hyLySelect ? 'success' : ''">
            {{ scope.row.hyLySelect ? 'VIP会员' : '普通会员' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="产品使用" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isUseProduct ? 'success' : 'info'">
            {{ scope.row.isUseProduct ? '已使用' : '未使用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button 
            type="primary"
            size="mini"
            plain
            @click="handleView(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>

      // 在分页组件前添加弹窗
      <el-dialog
        append-to-body
        title="会员详情"
        :visible.sync="dialogVisible"
        width="600px"
      >
        <div class="custom-detail">
        <div class="detail-row">
            <div class="detail-item">
            <span class="detail-label">姓名：</span>
            <span class="detail-value">{{ currentDetail.regName }}</span>
            </div>
            <div class="detail-item">
            <span class="detail-label">手机号：</span>
            <span class="detail-value">{{ currentDetail.regPhone }}</span>
            </div>
        </div>
        <div class="detail-row">
            <div class="detail-item">
            <span class="detail-label">邮箱：</span>
            <span class="detail-value">{{ currentDetail.regEmail }}</span>
            </div>
            <div class="detail-item">
            <span class="detail-label">公司：</span>
            <span class="detail-value">{{ currentDetail.regCompany }}</span>
            </div>
        </div>
        <div class="detail-row">
            <div class="detail-item">
            <span class="detail-label">职位：</span>
            <span class="detail-value">{{ currentDetail.regPosition }}</span>
            </div>
            <div class="detail-item">
            <span class="detail-label">会员类型：</span>
            <el-tag :type="currentDetail.hyLySelect ? 'success' : ''" size="mini">
                {{ currentDetail.hyLySelect ? 'VIP会员' : '普通会员' }}
            </el-tag>
            </div>
        </div>
        <div class="detail-row">
            <div class="detail-item">
            <span class="detail-label">产品使用：</span>
            <el-tag :type="currentDetail.isUseProduct ? 'success' : 'info'" size="mini">
                {{ currentDetail.isUseProduct ? '已使用' : '未使用' }}
            </el-tag>
            </div>
        </div>
        </div>
      </el-dialog>
    </el-table>
  </div>
</template>

<script>
import {getRegisterList} from '@/api/index'
export default {
  name: 'Registration',
  data() {
    return {
      searchParams: {
        regName: '',
        regPhone:'',
        pageNum: 1,
        count: 999,
      },
      tableData: [],
      currentDetail: {},
      dialogVisible: false,
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleSearch() {
      this.fetchData()
    },
    // 添加时间格式化方法
    formatTime(timestamp) {
      return timestamp ? new Date(timestamp).toLocaleString() : '-'
    },
    async fetchData() {
      // 模拟接口数据（更新为新的数据结构）
      getRegisterList(this.searchParams).then(res => {
        this.tableData = res.list
      })
    },
    // 新增查看方法
    handleView(row) {
      this.currentDetail = { ...row }
      this.dialogVisible = true
    },
  }
}
</script>

<style scoped>
.custom-detail {
  padding: 15px;
}
.detail-row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}
.detail-item {
  flex: 1;
  display: flex;
  align-items: center;
}
.detail-label {
  width: 80px;
  color: #666;
  font-weight: 500;
}
.detail-value {
  flex: 1;
  color: #333;
}

@media (max-width: 768px) {
  .detail-row {
    flex-direction: column;
    gap: 8px;
  }
}
</style>